<template>
  <div class="container">
    <div class="east">east</div>
    <div class="west">west</div>
    <div class="north">north</div>
    <div class="south">south</div>
    <div class="curr">currentroom:{{currentRoom}}</div>
    <div class="this"><img src="" alt=""></div>
    <div class="people" ref="people"><img src="../../../src/assets/image/hcr-tm.png" alt=""></div>
    <div class="notice" v-if="isShow">there is no door</div>
  </div>
</template>

<script>
import {requestTurnEast,requestTurnWest,requestTurnNorth,requestTurnSouth,requestGetItem} from "../../request/request";

export default {
  name: "center",
  data(){
    return{
      currentRoom:'outside',
      isShow:false,
      isMove:false
    }
  },
  mounted() {
    let that = this
    let people=this.$refs.people
    // console.log(people.offsetTop)
    document.onkeydown=(e)=>{
      // people.style.top=people.offsetTop +1+'px'
      let left = people.offsetLeft
      let top = people.offsetTop
      // console.log(people.style.top)
      let key = e.key
      switch (key){
        case 'a':
          if(left < 10){
            requestTurnWest().then(res=>{
              let result = res.data.resultCode
              if(result==='NULL'){
                that.isShow = true
              }else {
                if(that.isMove ===true){

                }else {

                  that.isMove = true
                  setTimeout(()=>{that.isMove =false},1000)
                  that.currentRoom = result
                  people.style.left = 600+'px'
                  requestGetItem(that.currentRoom).then(res=>{
                    console.log(res);
                  })
                }

              }
            })
          }else{
          people.style.left = left-5+'px'
            that.isShow = false
            // console.log(left)
          }
              break
        case 'w':
          if(top < 10){
            requestTurnNorth().then(res=>{
              let result = res.data.resultCode
              console.log(result)
              if(result==='NULL'){
                that.isShow = true
              }else {
                if (that.isMove === true) {

                } else {
                  requestGetItem(that.currentRoom).then(res=>{
                    console.log(res);
                  })
                  that.isMove = true
                  setTimeout(() => {
                    that.isMove = false
                  }, 500)
                  that.currentRoom = result
                  people.style.top = 500 + 'px'
                }
              }
              })
          }else{
            people.style.top = top-5+'px'
            that.isShow = false
          }
              break
        case 's':
          if(top > 500){
            requestTurnSouth().then(res=>{
              let result = res.data.resultCode
              console.log(result)
              if(result==='NULL'){
                that.isShow = true
              }else {
                if (that.isMove === true) {

                } else {
                  requestGetItem(that.currentRoom).then(res=>{
                    console.log(res);
                  })
                  that.isMove = true
                  setTimeout(() => {
                    that.isMove = false
                  }, 500)
                  that.currentRoom = result
                  people.style.top = 0 + 'px'
                }
              }
            })
          }else {
            people.style.top = top + 5 + 'px'
            that.isShow = false
          }
              break
        case 'd':
          if(left > 600){
            requestTurnEast().then(res=>{
              let result = res.data.resultCode
              console.log(result)
              if(result==='NULL'){
                that.isShow = true
              }else {
                if (that.isMove === true) {

                } else {
                  requestGetItem(that.currentRoom).then(res=>{
                    console.log(res);
                  })
                  that.isMove = true
                  setTimeout(() => {
                    that.isMove = false
                  }, 500)
                  that.currentRoom = result
                  people.style.left = 0 + 'px'
                }
              }
            })
          }else {
            people.style.left = left + 5 + 'px'
            that.isShow = false
          }
              break
      }
    }
  },
  methods:{
  }
}
</script>

<style scoped>
.this{
  
}
.container{
  width: 800px;
  height: 650px;
  position: relative;
  background-color: #F7F7F7;
}
.east{
  position: absolute;
  right: 0;
  top:325px;
}
.west{
  position: absolute;
  top:325px;
}
.north{
  position: absolute;
  left: 400px;
}
.south{
  position: absolute;
  left: 400px;
  top:625px;
}
.curr{
  position: absolute;
  left: 340px;
  top:550px;
  font-size: 20px;
}
.people{
  position: relative;
  top: 300px;
  left: 355px;
}
.notice{
  position: absolute;
  left: 365px;
  top:520px;
}
</style>